<template>
  <div class="login">
    <h1 class="ment">管理系统</h1>
    <p class="deng">系统登录</p>
    <div class="hao">
      *用户名&nbsp;&nbsp;&nbsp;<input
        v-model="value"
        type="text"
        placeholder="请输入用户名"
      />
    </div>
    <div class="mima">
      *密码&nbsp;&nbsp;&nbsp;
      <input v-model="value1" type="password" placeholder="请输入密码" />
    </div>
    <button class="dengbt" @click="ck2">登录</button>
  </div>
</template>

<script>
import logintime from "../js/time.js";
export default {
  data() {
    return {
      value: "",
      value1: "",
      rootData: {},
    };
  },
  created() {
    localStorage.setItem(
      "islogon",
      JSON.stringify(this.$store.state.rootisinformation)
    );
    this.rootData = JSON.parse(localStorage.getItem("islogon"));
    // console.log(this.rootData);
  },
  methods: {
    ck2() {
      if (
        this.rootData.name != this.value ||
        this.rootData.password != this.value1
      ) {
        alert("用户名或密码错误");
      } else if (
        this.rootData.name == this.value &&
        this.rootData.password == this.value1
      ) {
        const time = new Date();
        this.$store.commit("changeTime", logintime(time));
        this.$router.push({ name: "shou" });
        alert("登陆成功，欢迎进入管理系统");
      } else {
        return false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  position: relative;
  margin: 0 auto;
  top: 150px;
  width: 400px;
  height: 300px;
  border-radius: 10px 10px;
  box-shadow: 2px 2px 5px 5px rgb(218, 217, 217);
  // outline: 1px solid black;
}
.ment {
  position: absolute;
  top: -100px;
  left: 130px;
}
.deng {
  position: absolute;
  left: 165px;
  font-size: 20px;
  top: 20px;
}
.hao {
  position: absolute;
  left: 70px;
  top: 65px;
  font-size: 15px;
}
.hao input {
  width: 200px;
  height: 30px;
}
.mima {
  position: absolute;
  left: 80px;
  top: 130px;
  font-size: 15px;
}
.mima input {
  width: 200px;
  height: 30px;
}
.dengbt {
  position: absolute;
  width: 100px;
  height: 50px;
  top: 190px;
  left: 133px;
  font-size: 20px;
  color: white;
  border-radius: 10px 10px;
  background-color: rgba(67, 188, 218, 0.675);
}
</style>